<template>
  <div :class="{'navbar-item' : true, 'active': isActive}">
    <img :src="require('@/static/images/'+activeIcon)" v-if="isActive" :alt="navTitle">
    <img :src="require('@/static/images/'+icon)" v-else :alt="navTitle">
    <span>{{navTitle}}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      navTitle: {
        type: String, // 定义类型
        default: '', // 定义默认值
      },
      activeIcon:{
        type: String,
        default: '',
      },
      icon: {
        type: String,
        default: '',
      },
      isActive :{
        type: Boolean,
        default: false,
      }
    }
  }
</script>

<style scoped>
  .navbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 8px;
  }

  .navbar-item.active {
    border-bottom: 3px solid #007bff;
  }

  .navbar-item img {
    width: 24px;
    height: 24px;
  }
</style>